<template>
	<div class="x-chat">
		<!-- <div class="x-chat-time" v-if="message.time">{{message.time}}</div> -->
		<div class="x-chat-ul" :class="{'x-chat_reversal':message.isSelf}">
			<div class="">
				<div v-if="message.type === 4" alt="图片消息">
					<el-image class="pages-msg-img" :src="$ala.urlImage(message.content)" :preview-src-list="[$ala.urlImage(message.content)]"></el-image>
				</div>
				<div class="pages-msg-vcot" v-else-if="message.type === 9" alt="小视频消息">
					<video class="pages-msg-vcot_mat" :src="$ala.urlImage(message.content)" controls></video>
				</div>
				<div v-else-if="message.type === 2" alt="语音">
					<audio :src="$ala.urlImage(message.content.content)" controls></audio>
				</div>
				<div v-else-if="message.type===24">
					<ul class="x-chat_content-serviceuser">
						<li @click="selectCustomer(item24)" v-for="(item24,index24) in message.serviceUsers" :key="index24">
							<div class="x-chat_content-txt">{{item24.title}}</div>
						</li>
					</ul>
				</div>
				<div v-else class="x-chat_content x-chat_content-txt">{{message.content}}</div>
			</div>
		</div>
	</div>
</template>
<script>
	import ala from '@/service/ala'
	import api from '@/service/api'
	export default {
		props: {
			message: {}
		},
		data() {
			return {}
		},
		methods: {
			// 选择客服
			async selectCustomer(item) {
				await api.imCustomerSelect(item)
			}
		}
	}
</script>

<style lang="scss">
	@import "./var.scss";
</style>